<template>
  <f7-page>
    <f7-navbar title="操作条" back-link></f7-navbar>

      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-orange '></span> 宫格列表
        </div>
      </div>
      
      <div :class="'col-'+gridCol" class="tien-list grid ">
        <div class="tien-item tien-col" v-for="(item,index) in iconList" v-if="index<gridCol*2" >
          <div :class="'tien-icon-'+item.icon +' text-'+item.color" >
            <div class="tien-tag badge" v-if="item.badge!=0">
              <div v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</div>
            </div>
          </div>
          <span>{{item.name}}</span>
        </div>
      </div>

      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-orange '></span> 菜单列表 
        </div>
      </div>
      <div class="tien-list menu sm-border ">
        <div class="tien-item arrow">
          <div class='content'>
            <span class='tien-icon-circlefill text-grey'></span>
            <span class='text-grey'>图标 + 标题</span>
          </div>
        </div>
        <div class="tien-item arrow">
          <div class='content'>
            <span class='text-grey'>标题 - 箭头</span>
          </div>
        </div>
      </div>


      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-orange '></span> 菜单列表 + 卡片
        </div>
      </div>
      
      
      <div class="tien-list menu  card-menu margin-top">
        <div class="tien-item arrow">
          <div class='content'>
            <span class='tien-icon-circlefill text-grey'></span>
            <span class='text-grey'>图标 + 标题</span>
          </div>
        </div>
        <div class="tien-item ">
          <div class='content'>
            <img src='/assets/images/logo.png' class='png'>
            <span class='text-grey'>图片 + 标题 - 箭头</span>
          </div>
        </div>
        <div class="tien-item arrow">
          <button class='tien-btn content' open-type='contact'>
            <span class='tien-icon-btn text-olive'></span>
            <span class='text-grey'>Open-type 按钮</span>
          </button>
        </div>
        <div class="tien-item arrow">
          <div class='content' hover-class='none' url='../list/list' open-type="redirect">
            <span class='tien-icon-discoverfill text-orange'></span>
            <span class='text-grey'>Navigator 跳转</span>
          </div>
        </div>
        <div class="tien-item arrow">
          <div class='content'>
            <span class='tien-icon-emojiflashfill text-pink'></span>
            <span class='text-grey'>头像组</span>
          </div>
          <div class='action'>
            <div class="tien-avatar-group">
              <div class="tien-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></div>
              <div class="tien-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
              <div class="tien-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></div>
              <div class="tien-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></div>
            </div>
            <span class='text-grey text-sm'>4 人</span>
          </div>
        </div>
        <div class="tien-item arrow">
          <div class='content'>
            <span class='tien-icon-btn text-green'></span>
            <span class='text-grey'>按钮</span>
          </div>
          <div class='action'>
            <button class='tien-btn round bg-green shadow'>
              <span class='tien-icon-upload'></span> 上传</button>
          </div>
        </div>
        <div class="tien-item arrow">
          <div class='content'>
            <span class='tien-icon-tagfill text-red'></span>
            <span class='text-grey'>标签</span>
          </div>
          <div class='action'>
            <div class="tien-tag round bg-orange light">音乐</div>
            <div class="tien-tag round bg-olive light">电影</div>
            <div class="tien-tag round bg-blue light">旅行</div>
          </div>
        </div>
        <div class="tien-item arrow">
          <div class='content'>
            <span class='tien-icon-warn text-green'></span>
            <span class='text-grey'>文本</span>
          </div>
          <div class='action'>
            <span class='text-grey text-sm'>小目标还没有实现！</span>
          </div>
        </div>
        <div class="tien-item">
          <div class='content padding-tb-sm'>
            <div>
              <span class='tien-icon-clothesfill text-blue'></span> 多行Item</div>
            <div class='text-gray text-sm'>
              <span class='tien-icon-infofill'></span> 小目标还没有实现！</div>
          </div>
          <div class='action'>
            <switch class='switch-sex sm' bindchange="switchSex"></switch>
          </div>
        </div>
      </div>

      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-orange '></span> 消息列表
        </div>
      </div>
      <div class="tien-list menu menu-avatar">
        <div class="tien-item">
          <div class="tien-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></div>
          <div class='content'>
            <div class='text-grey'>文晓港</div>
            <div class='text-gray text-sm'>
              <span class='tien-icon-infofill text-red'></span> 消息未送达</div>
          </div>
          <div class='action'>
            <div class='text-grey text-xs'>22:20</div>
            <div class="tien-tag round bg-grey sm">5</div>
          </div>
        </div>
        <div class="tien-item">
          <div class="tien-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
            <div class="tien-tag badge">99+</div>
          </div>
          <div class='content'>
            <div class='text-grey'>文晓港
              <div class="tien-tag round bg-orange sm">SVIP</div>
            </div>
            <div class='text-gray text-sm'>
              <span class='tien-icon-redpacket_fill text-red'></span> 收到红包</div>
          </div>
          <div class='action'>
            <div class='text-grey text-xs'>22:20</div>
            <div class='tien-icon-notice_forbid_fill text-gray'></div>
          </div>
        </div>
        <div class="tien-item ">
          <div class="tien-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
          <div class='content'>
            <div>喵星人互动群</div>
            <div class='text-gray text-sm'>
              喵星酱：喵喵喵！</div>
          </div>
          <div class='action'>
            <div class='text-grey text-xs'>22:20</div>
            <div class="tien-tag round bg-red sm">5</div>
          </div>
        </div>
        <div class="tien-item grayscale">
          <div class="tien-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
          <div class='content'>
            <div>喵星人互动群</div>
            <div class='text-gray text-sm'>
              喵星酱：喵喵喵！</div>
          </div>
          <div class='action'>
            <div class='text-grey text-xs'>22:20</div>
            <div class="tien-tag round bg-red sm">5</div>
          </div>
        </div>
        <div class="tien-item cur">
          <div class="tien-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
            <div class="tien-tag badge"></div>
          </div>
          <div class='content'>
            <div>喵星人互动群
              <div class="tien-tag round bg-orange sm">6人</div>
            </div>
            <div class='text-gray text-sm'>
              喵星酱：
              <span class='tien-icon-picfill text-orange'></span> 图片传输中...</div>
          </div>
          <div class='action'>
            <div class='text-grey text-xs'>22:20</div>
            <div class='tien-icon-notice_forbid_fill text-gray'></div>
          </div>
        </div>
      </div>

  </f7-page>
</template>

<script>
import '../../css/colorui/tag.css';
import '../../css/colorui/list.css';
export default {
  name:'list',
  data() {
    return {
      iconList: [{
      icon: 'cardboardfill',
      color: 'red',
      badge: 120,
      name: 'VR'
    }, {
      icon: 'recordfill',
      color: 'orange',
      badge: 1,
      name: '录像'
    }, {
      icon: 'picfill',
      color: 'yellow',
      badge: 0,
      name: '图像'
    }, {
      icon: 'noticefill',
      color: 'olive',
      badge: 22,
      name: '通知'
    }, {
      icon: 'upstagefill',
      color: 'cyan',
      badge: 0,
      name: '排行榜'
    }, {
      icon: 'clothesfill',
      color: 'blue',
      badge: 0,
      name: '皮肤'
    }, {
      icon: 'discoverfill',
      color: 'purple',
      badge: 0,
      name: '发现'
    }, {
      icon: 'questionfill',
      color: 'mauve',
      badge: 0,
      name: '帮助'
    }, {
      icon: 'commandfill',
      color: 'purple',
      badge: 0,
      name: '问答'
    }, {
      icon: 'brandfill',
      color: 'mauve',
      badge: 0,
      name: '版权'
    }],
    gridCol:3,
    skin: false
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

